<template>
  <ul class="gift-ul">
    <li
      class="item"
      v-for="item in data"
      :key="item.id"
      @click="goPage(item.awardIndex,item.awardId)"
    >
      <div class="gift-pic">
        <img
          class="g-pic"
          v-lazy="item.pic"
        >
      </div>
      <div class="info">
        <p class="name">{{item.remark}}</p>
        <div class="dl">奖项：
          <span class="color-black">{{item.title}}</span>
        </div>
        <div class="dl">领取人：
          <span class="color-black">{{item.title}}</span>
        </div>
        <div
          class="dl"
          v-if="item.coin!==0"
        >积分：
          <span class="color-red">{{item.coin}}</span>
        </div>
        <div
          class="dl"
          v-if="item.price!==0"
        >金额：
          <span class="color-red">￥{{item.price}}</span>
        </div>
        <div
          class="dl"
          v-if="item.createTime&&createTime"
        >{{item.createTime}}</div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      defalut: []
    },
    createTime: {
      type: Boolean,
      defalut: false
    }
  },
  methods: {
    goPage(awardIndex, id) {
      if (awardIndex === '1') {
        this.$router.push({
          path: '/moon-festival/rank',
          query: { code: 'champion', id: id }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.gift-ul {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  .item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 40px;
    padding: 25px 40px 25px 0;
    border-bottom: 0.0133rem solid #ebebeb;
    &:last-child {
      border-bottom: 0;
    }
    .gift-pic {
      width: 150px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 150px;
      margin-right: 30px;
      .g-pic {
        max-width: 150px;
        max-height: 150px;
      }
    }
  }
  .info {
    flex: 1;
    .name {
      @include sc(28px, #3b3b3b);
    }
    .dl {
      @include sc(26px, #989898);
    }
  }
}
</style>
